<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item">
               <uv-text text="我用十年青春,赴你最后之约"></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">设置主题</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item">
               <uv-text text="主色" type="primary"></uv-text>
            </view>
            <view class="uv-page__text-item">
               <uv-text type="error" text="错误"></uv-text>
            </view>
            <view class="uv-page__text-item">
               <uv-text type="success" text="成功"></uv-text>
            </view>
            <view class="uv-page__text-item">
               <uv-text type="warning" text="警告"></uv-text>
            </view>
            <view class="uv-page__text-item">
               <uv-text type="info" text="信息"></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">拨打电话</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item">
               <uv-text mode="phone" text="15019479320"></uv-text>
               <uv-text mode="phone" text="15019479320" format="encrypt"></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">日期格式化</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item">
               <uv-text mode="date" text="1612959739"></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">姓名脱敏</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item">
               <uv-text mode="name" text="张三三" format="encrypt"></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">超链接</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item">
               <uv-text mode="link" text="Go to uv docs" href="https://www.uviewui.com"></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">显示金额</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item">
               <uv-text mode="price" text="728732.32"></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">前后图标</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__text-item" style="margin-right: 50px">
               <uv-text prefixIcon="photo" iconStyle="font-size: 19px" text="百度一下"></uv-text>
            </view>
            <view class="uv-page__text-item">
               <uv-text
                  suffixIcon="arrow-leftward"
                  iconStyle="font-size: 18px"
                  text="查看更多"
               ></uv-text>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">超出隐藏</text>
         <view class="uv-demo-block__content">
            <uv-text
               :lines="2"
               text="关于uv-ui的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，故取名uv-ui，表达源于uni-app和Vue和uView之意，同时在此也对它们表示感谢。"
            ></uv-text>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">小程序开放能力</text>
         <view class="uv-demo-block__content">
            <uv-text
               text="分享到微信"
               openType="share"
               type="success"
               @click="clickHandler"
            ></uv-text>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
const clickHandler = () => {
   // #ifndef MP-WEIXIN
   uni.$uv.toast('请在微信小程序内查看效果');
   // #endif
};
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';
.uv-demo-block {
   margin-bottom: 23px;
}

.uv-page__text-item {
   margin-right: 10px;
   flex: 1;
}

.uv-demo-block__content {
   @include flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
}
</style>
